<template>
  <div class="bg">
    <dialog-content :item='item' :dialogFormVisible='dialogFormVisible' @changeShow='changeShow'></dialog-content>
    <div class='bigBox'>
      <!-- <img class='title' src="../../assets/logo.png" alt="">
      <img class='title2' src="../../assets/slogen.png" alt=""> -->
      <!-- <img class='center' src="../../assets/center.png" alt=""> -->
        <div class="btnList">
          <div class="breathe-div" @click="jump(1)">我要入驻</div>
          <div class="breathe-div" @click="jump(2)">入园政策</div>
          <!-- <div class="breathe-div" @click="jump(3)">楼宇查询</div> -->
          <!-- <div class="breathe-div" @click="jump(4)">申请表</div> -->
          <div class="breathe-div" @click="toNewPage(4)">载体查询</div>
          <div class="breathe-div" @click="jump(5)">园区设施</div>
        </div>
        <div class="content">
          <el-row class='contentTitle'>
            <el-col :span='12'>
              <span>
                申报信息
                <div class='bottomLine'></div>
              </span>              
            </el-col>
            <el-col :span='6'>
              <span>
                最新活动
                <div class='bottomLine'></div>
              </span>
            </el-col>
            <el-col :span='6'>
              <span>
                热门服务
                <div class='bottomLine'></div>
              </span>
            </el-col>
          </el-row>
          <el-row class='littleContent'>
            <el-col :span='12'>
              <div class='item'>
                <el-scrollbar style="height: 100%;">
                <ul class="el-scrollbar__wrap">                  
                  <li v-for="(item, index) in policyList" :key="index" @click="thisItem(item)">
                    <!-- {{item}} -->
                    <div style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-right: 15px;">{{item.name}}</div>
                    <div class="littleBtns" v-for="item2 in item.tags" :key="item2">
                      <span>{{item2}}</span>
                    </div>
                  </li>                 
                </ul>
                </el-scrollbar>
              </div>
            </el-col>
            <el-col :span='6'>
              <!-- <el-scrollbar style="height: 100%;">
                <div class="el-scrollbar__wrap">
                  <div class='item' v-for="(item, index) in activityList" :key="index" @click="thisItem(item)">
                    <img :src="item.headImg" alt="" >
                    <div>
                      <span class='title3'>{{item.name}}</span>
                      <span>活动时间：{{item.actBegin}}</span>
                      <span>活动地点：{{item.location}}</span>
                    </div>
                  </div>
                </div>
              </el-scrollbar> -->
              <v-touch @swiperight="swipeleft"
                @swipeleft="swiperight"
                style="width:100%;height:100%;">
              <el-carousel style="overflow:hidden; height: 60vh; box-sizing:border-box;" arrow="never" ref='carousel'>
                <el-carousel-item  v-for="(item, index) in activityList" :key="index">
                  <div class='item' @click="thisItem(item[0])">
                    <img :src="item[0].headImg" alt="" >
                    <div style="">
                      <span class='title3'>{{item[0].name}}</span>
                      <span>活动时间：{{item[0].actBegin.slice(0,10)}}</span>
                      <span>活动地点：{{item[0].location}}</span>
                    </div> 
                  </div>
                  <div class='item' v-if='item[1]' @click="thisItem(item[1])">
                  <img  :src="item[1].headImg" alt="" >
                    <div style="">
                      <span class='title3'>{{item[1].name}}</span>
                      <span>活动时间：{{item[1].actBegin.slice(0,10)}}</span>
                      <span>活动地点：{{item[1].location}}</span>
                    </div>   
                   </div>   
                </el-carousel-item>
              </el-carousel>
              </v-touch>
            </el-col>
            <el-col class='fixBox' :span='6'>
              <div class='item3' @click="toNewPage(1)">
                太仓一网通办
              </div>
              <div class='item3' @click="toNewPage(2)">
                太仓市企业服务中心
              </div>
              <div class='item3' @click="toNewPage(3)">
                太易居人才公寓 <br>融合服务平台
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
  </div>
</template>

<script>
import DialogContent from './components/DialogContent.vue'
import { GetPolicyList, GetactivityList } from '../../api/city.js'

export default {
  components: {
    DialogContent
  },
  data() {
    return {
      dateTime: '',
      policyList: [],
      activityList: [],
      item: '',
      dialogFormVisible: false,
    }
  },
  methods: {
    jump(num){
      switch(num) {
        case 1: this.$router.push({ path: '/' }); break;
        case 2: this.$router.push({ path: '/social1' }); break;
        case 3: this.$router.push({ path: '/hospital' }); break;
        case 4: this.$router.push({ path: '/newFormList' }); break;
        case 5: this.$router.push({ path: '/boardhouse' }); break;
      }      
    },
    toNewPage(num) {
      switch(num) {
        case 1: this.$router.push({ name: 'Open', params:{ url: 'https://zwfw.taicang.gov.cn/allinone-web/index.html#/'} }); break;
        case 2: this.$router.push({ name: 'Open', params:{ url: 'http://www.taicangqyfw.com.cn/'} }); break;
        case 3: this.$router.push({ name: 'Open', params:{ url: 'https://www.tctyj.cn/#/home'} }); break;
        case 4: this.$router.push({ name: 'Open', params:{ url: 'http://58.211.58.93:28088/dcy-city/'} }); break;
        // case 4: this.$router.push({ name: 'Open', params:{ url: '/model'} }); break;
        
      }
    },
    getTime() {
      let that = this;
      this.dateTime = JSON.parse(localStorage.getItem('dateTime'));
      setTimeout(() => {
        that.getTime()
      }, 1000);
    },
    thisItem(item) {      
      this.dialogFormVisible = true
      this.item = item
      console.log(item, this.dialogFormVisible, 'item')
    },
    changeShow() {
      this.dialogFormVisible = false
    },
    swipeleft() {
      console.log('left')
      this.$refs.carousel.prev()
    },
    swiperight() {
      console.log('right')
      this.$refs.carousel.next()
    },
  },
  created() {
    this.getTime()
    const params = {
      pageNum: 1,
      pageSize: 10,
      isMarketable: true
    }
    GetPolicyList(params).then(res => {
      this.policyList = res.data.rows
      this.policyList.tags = []
      let len = res.data.total
      for(let i = 0; i < len; i++) {
        this.policyList[i].tags = res.data.rows[i].tag.split(',')
      }
      
      console.log(res.data, this.policyList, 'res1')
    })
    GetactivityList(params).then(res => {
      let len = res.data.rows.length
      for(let i = 0; i < len; i += 2) {
        this.activityList.push(res.data.rows.slice(i,i+2))
      }      
      console.log(res.data, this.activityList, 'res2')
    })
  },
}
</script>

<style scoped  lang="less">
.bg {
  width: 100%;
  height: 100vh;
  background-image: url('../../assets/bf2.png');
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .bigBox {
    // border: 1px solid red;
    width: 90%;
    height: 90vh;    
    // background-image: url('../../assets/back2.png');
    background-size: 120% 120%;
    background-position: center;
    position: relative;
    .title {
      height: 20px;
      margin: 5px;
    }
    .title2 {
      height: 40px;
      margin: 5px;
      position: absolute;
      right: 0px;
    }
    .btnList {
      display: flex;
      justify-content: center;
      margin-top: 6vh;
    }
    .content {    
      // border: 1px solid red;
      .contentTitle {
        border-bottom: 2px solid #0068b5;
        margin-bottom: 10px;
        .el-col {
          text-align: center;
          font-size: 20px;
          font-weight: bold;
          // border: 1px solid green;
        }
        span {
          display: inline-block;
          // height: 32px;
          color: #fff;
          padding: 5px 40px 10px 40px;
          // border-bottom: 3px solid #0068b5;
          background-image:  url('../../assets/centerTitleB.png');
          background-size: 100% 100%;
          position: relative;
          margin-bottom: 10px;
          .bottomLine {
            position: absolute;
            display: inline-block;
            width: 100px;
            border: 2px solid #1e67a2;
            top: 50px;
            left:26px;
          }
        }
        
      }
      .littleContent {
        .el-col {          
          // border: 1px solid green;          
          height: 60vh;
        }
        .item {
          border-top-left-radius: 15px;
          border-top-right-radius: 30px;
          background-image: url('../../assets/textBox.png');
          background-size: 100% 100%;
        }
        .el-col-12>div {
          font-weight: bold;
          height: 100%;
          padding-left: 5px;
         
          ul {
            height: 100%;
            // overflow-y: scroll;
          }
          li {
            height: 8vh;
            // border: 1px solid red;
            cursor: pointer;
          }
          li::marker {
            color: #001e69;
            font-size: 30px;
          }
        }
        .el-col-6 .item {
          margin-left: 30px;
          // min-height: 29vh;
          height: 49%;
          border-radius: 15px;
          overflow: hidden;
          cursor: pointer;
          margin-bottom: 0.5vh;
          box-sizing: border-box;
          img {
            height: 16vh;
            width: 100%;
            object-fit: cover;
            padding-right: 5px;
            box-sizing: border-box;
            // border: 1px solid red;
          }
          div {
            display: flex;
            flex-direction: column;
            padding: 10px;
            box-sizing: border-box;
            min-height: 10vh;
            justify-content: space-around;
            .title3 {
              font-weight: bold;
              color: #001e69;
              font-size: 16px;
              // max-height: 40px;
              // overflow: hidden;
              display: -webkit-box;
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
            }
            span {
              font-size: 14px;
              color: #464646;
            }
          }
        }
        .littleBtns {
          span {
            background-color: #0068b5;
            border-radius: 5px;
            color: #fff;
            font-size: 12px;
            padding: 2px 6px;
            margin-right: 5px;
          }
        }
        .fixBox {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0px 20px 0vh 20px;
          box-sizing: border-box;
          height: 58vh;
          .item3 {
            cursor: pointer;
            background-image: url('../../assets/itemBack1.png');
            background-size: 100% 100%;
            height: 18vh;
            // flex-grow: 1;
            margin: 0 20px;
            padding: 30px;
            box-sizing: border-box;      
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            display: flex;
            justify-content: end;
            align-items: center;

          }
          .item3:nth-child(2) {
            background-image: url('../../assets/itemBack2.png');         
          }
          .item3:nth-child(3) {
            background-image: url('../../assets/itemBack3.png');         
          }
        }
      }
    }
  }
.el-scrollbar__wrap {
  overflow-x: hidden;
  height: 100%;
  // border: 1px solid red;
}
::-webkit-scrollbar {
  width: 5px !important;
}
/* 滚动条背景颜色 */
::-webkit-scrollbar {
    background-color: #fff !important;
}
 
 
/*滚动条样式设置*/
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    border-radius: 0;
    background-color: rgba(0,0,0,0.1);
}
 
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rgba(0,0,0,0.1);
}
 
 
/* 设置垂直滚动条的宽度和水平滚动条的高度 */
::-webkit-scrollbar{
    width: 8px;
    height: 8px;
}
 
/* 设置滚动条的滑轨 */
::-webkit-scrollbar-track {
    background-color: #f2f9fc;
}
 
/* 滑块 */
::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
}
  .breathe-div {
    cursor: pointer;
    width: 110px;
    padding: 10px 10px;
    margin: 25px;
    text-align: center;
    background-color: aqua;
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    border-radius: 10px;
    background-color: #0068b5;
  }
  // .breathe-div:nth-child(2n+1) {
  //   background-color: #0068b5;
  // }
  // .breathe-div:nth-child(2n) {
  //   background-color: #001e69;
  // }
  
}
</style>
<style lang='less'>
body {
  margin: 0;
}
.littleContent {
  .el-carousel__container {
    height: 58vh !important;
  }
  .el-carousel__indicator {
    // border: 1px solid red;
    position: relative;
    top: 0px;
    button {
      background-color: #0068b5;
    }
  }
}
//  el-carousel__indicator--horizontal is-active
</style>
